<template>
  <section>
    <search-box>
      <div class="search-box">
        <el-input
          class="search-input m-r-10"
          v-model="searchForm.key"
          placeholder="规格组名称模糊查询"
        ></el-input>
        <el-button type="primary" @click="FnSearch">查询</el-button>
        <el-button
          type="primary"
          @click="FnImport"
          :disabled="FnBtnDisabled('eks_2_createGoods')"
          >导入规格</el-button
        >
      </div>
    </search-box>
    <el-table :data="searchForm.goodsList" border>
      <el-table-column prop="goods_id" label="商品ID"></el-table-column>
      <el-table-column label="商品有效">
        <template #default="scope">
          {{ scope.row.is_valid ? "有效" : "失效" }}
        </template>
      </el-table-column>
      <el-table-column prop="family_id" label="规格族ID"></el-table-column>
      <el-table-column prop="family_cn" label="规格组名称"></el-table-column>
      <el-table-column label="操作" width="360">
        <template #default="scope">
          <el-button type="text" @click="FnCheckDetail(scope.row)"
            >查看详情</el-button
          >
          <el-button
            type="text"
            @click="FnUpdateGoods(scope.row)"
            :disabled="FnBtnDisabled('eks_2_updateGoods')"
            >更新规格</el-button
          >
          <el-button
            type="text"
            @click="FnDelete(scope.row)"
            :disabled="FnBtnDisabled('eks_2_deleteGoods')"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情 -->
    <Detail v-model="detailVisible" :row="currentRow" />
  </section>
</template>
<script setup>

import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import searchBox from '@/components/search-box.vue'
import GoodsService from '@/service/eks/goods'
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { authBtnDisabled } from '@/utils/auth.js'
const Detail = defineAsyncComponent(() => import('./components/Detail.vue'))

const router = useRouter()
const route = useRoute()
const searchForm = reactive({
  key: '',
  goodsList: [],
  allGoodsList: []
})
// 查询规格列表
const FnGetGoodsList = () => {
  GoodsService.getBoundGoods().then(res => {
    if (res.code === 'Success') {
      searchForm.goodsList = res.data
      searchForm.allGoodsList = res.data
    }
  })
}
// 模糊查询规格组名称
const FnSearch = () => {
  searchForm.goodsList = searchForm.allGoodsList.filter(v => {
      return v.family_cn.indexOf(searchForm.key) > -1
  })
}
onMounted(() => {
  FnGetGoodsList()
})

const FnImport = () => {
  router.push({ path: 'eks/goods/create' })
}
const FnDelete = (row) => {
  ElMessageBox.confirm(
    '您确认要删除此规格吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      GoodsService.deleteGoods({ goods_id: `${row?.goods_id}` }).then(res => {
        if (res.code === 'Success') {
          ElMessage.success('删除成功')
          FnGetGoodsList()
        }
      })
    })
    .catch(() => {
      ElMessage.success('取消删除')
    })

}

let detailVisible = ref(false);
let currentRow = ref({});

const FnCheckDetail = (row) => {
  currentRow.value = row;
  detailVisible.value = true;
}
const FnUpdateGoods = (row) => {
  router.push({ name: `eks_1_goods_update`, query: { ...row } })
}
const FnBtnDisabled = (key) => {
  return authBtnDisabled(key, route.meta.name)
}
</script>
<style scoped>
</style>
